import React, { useState } from 'react';
import { Breadcrumb, Input, Button, Form, Upload, message, Select } from 'antd';
import { useNavigate } from 'react-router-dom'
import '../../../views/Index/StaffAdd/StaffAdd.scss'
import * as service from '../../../api/gl'

interface Props {

}

function StaffAdd(props: Props) {
    const [form] = Form.useForm();

    const navigate = useNavigate()
    const tiao = () => {
        navigate('/index/staff')
    }

    const { TextArea } = Input;


    const [fileList, setFileList] = useState([

    ]);

    const uploadButton = (
        <div>
            <div style={{ marginTop: 8 }}>Upload</div>
        </div>
    );

    var onFinish = async (formvaluse: any) => {
        console.log(formvaluse);
        var res = await service.staff_add({ name:formvaluse.name,login:formvaluse.login,jiaose:formvaluse.jiaose,addperson:formvaluse.addperson,time:formvaluse.time, })
        if(res.status == 201){
            message.success('添加成功')
            tiao()
        }else{
            message.error('添加失败')
        }

    }





    return (
        <div className='staffadd'>
            <div className="one">
                <Breadcrumb>
                    <Breadcrumb.Item>
                        <a href="">设置</a>
                    </Breadcrumb.Item>
                    <Breadcrumb.Item>
                        <a href="">员工管理</a>
                    </Breadcrumb.Item>
                    <Breadcrumb.Item>
                        <a href="">新建员工信息</a>
                    </Breadcrumb.Item>
                </Breadcrumb>
                <p>新建员工信息</p>
            </div>
            <div className="xia">
                <span>基础信息</span>
                <div className="foot">
                    <Form
                        form={form}
                        onFinish={onFinish}
                    >
                        <Form.Item
                            name="name"
                            label="员工姓名"
                            rules={[{ required: true, message: '请输入姓名' }]}
                        >
                            <Input placeholder="请输入姓名" />
                        </Form.Item>
                        <Form.Item
                            name="login"
                            label="登录账号"
                            rules={[{ required: true, message: '请输入登录账号' }]}
                        >
                            <Input placeholder="请输入登录账号" />
                        </Form.Item>
                        <div className="chuan">
                            <Form.Item
                                name="员工头像"
                                label="员工头像"
                            >
                            </Form.Item>
                            <div className="up">
                                <Upload
                                    action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                                    listType="picture-card"
                                // onPreview={handlePreview}
                                // onChange={handleChange}
                                >
                                    {fileList.length >= 8 ? null : '点击上传'}
                                </Upload>
                                <p>建议尺寸640*320,小于10M的JPG、PNG格式图片</p>
                            </div>
                        </div>

                        <div className="jiaose">
                            <Form.Item
                                name="jiaose"
                                label="员工角色"
                                rules={[{ required: true, message: '请选择角色' }]}
                            >
                                <Select
                                    defaultValue="请选择分类"
                                    style={{ width: 300 }}
                                    options={[
                                        { value: '管理员', label: '管理员' },
                                        { value: '老师', label: '老师' },
                                        { value: '课程顾问', label: '课程顾问' },
                                        { value: '助教', label: '助教' },
                                    ]}

                                />
                            </Form.Item>
                        </div>
                        <div className="deng">
                            <Form.Item
                                name="password"
                                label="登录密码"
                                rules={[{ required: true, message: '请输入登录密码' }]}
                            >
                                <Input placeholder="请输入登录密码" />
                            </Form.Item>
                        </div>
                        <div className="some">
                            <Form.Item
                                name="addperson"
                                label="添加人"
                                rules={[{ required: true, message: '请输入添加人' }]}
                            >
                                <Input placeholder="请输入添加人" />
                            </Form.Item>
                            <Form.Item
                                name="time"
                                label="添加时间"
                                rules={[{ required: true, message: '请输入添加时间' }]}
                            >
                                <Input placeholder="请请输入添加时间输入" />
                            </Form.Item>
                        </div>
                        <div className="jieshao">
                            <p>员工介绍:</p>
                            <TextArea rows={4} placeholder="请输入" maxLength={1000} />
                        </div>
                        <div className="btn">
                            <Button type="primary" htmlType="submit">提交</Button>
                            <Button onClick={tiao}>返回</Button>
                        </div>
                    </Form>
                </div>
            </div>
        </div>
    );
}

export default StaffAdd;